Riot.js-এ Advanced Props এবং Attributes ব্যবস্থাপনা অত্যন্ত গুরুত্বপূর্ণ, বিশেষ করে যখন আপনি ডাইনামিক্যালি বা কাস্টম উপাদানগুলো তৈরি করতে চান। Props এবং Attributes ব্যবহার করে কম্পোনেন্টগুলির মধ্যে ডেটা আদান-প্রদান করা হয়, এবং এটি একটি শক্তিশালী পদ্ধতি যা আপনাকে কাস্টম কম্পোনেন্ট তৈরি করার সময় অনেক নিয়ন্ত্রণ এবং নমনীয়তা দেয়।
১. Advanced Props in Riot.js
Riot.js-এ Props হল সেই ডেটা যেগুলি প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হয়। এগুলি সাধারণত একটি ইনপুট বা কনফিগারেশন হিসেবে কাজ করে। যখন আপনি অ্যাডভান্সড প্রপস ব্যবহার করেন, তখন আপনি সেই প্রপসগুলির মাধ্যমে আরও ডাইনামিক এবং কাস্টমাইজড আচরণ অর্জন করতে পারেন।
১.১ Default Props with Fallback Values
Riot.js-এ আপনি প্রপসের জন্য ডিফল্ট মান নির্ধারণ করতে পারেন, যা প্রপস প্রদান না করা হলে ব্যবহৃত হবে। এর মাধ্যমে, আপনি কম্পোনেন্টের মধ্যে একটি প্রপসের মান যদি না থাকে, তবে তা ফ্যালব্যাক ভ্যালু ব্যবহার করতে পারবেন।
<!-- UserProfile.riot -->
<user-profile>
<h2>{opts.name || 'Anonymous'}</h2>
<p>{opts.age || 'Unknown age'}</p>
<script>
export default {
opts: {
name: '',
age: ''
}
}
</script>
</user-profile>
এখানে, যদি name বা age প্রপস প্যারেন্ট কম্পোনেন্ট থেকে না আসে, তবে কম্পোনেন্ট ডিফল্ট মান হিসেবে 'Anonymous' এবং 'Unknown age' প্রদর্শন করবে।
১.২ Dynamic Props (ডাইনামিক প্রপস)
ডাইনামিক প্রপস আপনাকে এমন প্রপস পাস করতে সাহায্য করে যা রিয়েল টাইমে পরিবর্তিত হতে পারে। Riot.js-এ ডাইনামিক প্রপস ব্যবহার করে আপনি কাস্টমাইজড এবং রিয়েকটিভ UI তৈরি করতে পারেন।
<!-- ButtonComponent.riot -->
<button onclick={handleClick}>{opts.label}</button>
<script>
export default {
handleClick() {
this.opts.label = 'Clicked!';
this.update(); // কম্পোনেন্টটি পুনরায় রেন্ডার করার জন্য
}
}
</script>
এখানে, যখন বাটনে ক্লিক করা হবে, label প্রপস পরিবর্তিত হবে এবং UI পুনরায় রেন্ডার হবে।
১.৩ Passing Objects as Props
আপনি অবজেক্ট বা অ্যারে হিসেবেও প্রপস পাঠাতে পারেন। এটি আপনার কম্পোনেন্টে আরও জটিল ডেটা স্ট্রাকচার হ্যান্ডেল করতে সহায়ক।
<!-- ProductList.riot -->
<product-list>
<ul>
<li each={product in opts.products}>
{product.name} - ${product.price}
</li>
</ul>
<script>
export default {
opts: {
products: []
}
}
</script>
</product-list>
এখানে, products প্রপস একটি অ্যারে যা প্যারেন্ট কম্পোনেন্ট থেকে পাস করা হবে এবং এটি কম্পোনেন্টের মধ্যে লিস্ট আকারে রেন্ডার হবে।
১.৪ Two-way Data Binding with Props
Riot.js-এ টু-ওয়ে ডেটা বাইন্ডিং করা সম্ভব, যাতে কম্পোনেন্টের মধ্যে একটি প্রপস পরিবর্তন হলে সেই পরিবর্তন প্যারেন্ট কম্পোনেন্টে প্রতিফলিত হয় এবং উল্টোটাও ঘটে।
<!-- CounterComponent.riot -->
<counter-component>
<button onclick={decrement}>-</button>
<span>{opts.count}</span>
<button onclick={increment}>+</button>
<script>
export default {
increment() {
this.opts.count += 1;
this.update();
},
decrement() {
this.opts.count -= 1;
this.update();
}
}
</script>
</counter-component>
এখানে, count প্রপস প্যারেন্ট কম্পোনেন্ট থেকে পাস করা হচ্ছে, এবং প্রতিবার বাটন ক্লিক করার সময় সেটি পরিবর্তিত হবে।
২. Attributes in Riot.js
Riot.js-এ Attributes হল HTML ট্যাগের অ্যাট্রিবিউট যেমন class, id, style, ইত্যাদি। আপনি custom attributes ব্যবহার করতে পারেন, যা কাস্টম কম্পোনেন্টে ডেটা পাস করার জন্য ব্যবহৃত হয়।
২.১ Accessing HTML Attributes
Riot.js আপনাকে HTML এর অ্যাট্রিবিউট অ্যাক্সেস করতে দেয় যা আপনি কম্পোনেন্টের মধ্যে ব্যবহার করতে পারেন। সাধারণত এটি opts (প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত প্রপস) বা attrs (কাস্টম অ্যাট্রিবিউট) এর মাধ্যমে করা হয়।
<!-- CustomButton.riot -->
<custom-button>
<button id={opts.id} class={opts.class}>{opts.text}</button>
<script>
export default {
opts: {
id: 'default-btn',
class: 'primary-btn',
text: 'Click me'
}
}
</script>
</custom-button>
এখানে, id, class, এবং text নামক অ্যাট্রিবিউটগুলি প্যারেন্ট কম্পোনেন্ট থেকে পাস করা হচ্ছে এবং এটি বাটনের id, class, এবং টেক্সট হিসাবে ব্যবহার হচ্ছে।
২.২ Passing Custom Attributes
রিয়েকটিভ কম্পোনেন্টে আপনি কাস্টম অ্যাট্রিবিউট পাস করতে পারেন যেগুলি উপাদানটিকে আরও কাস্টমাইজড করে তোলে।
<!-- Tooltip.riot -->
<tooltip>
<div class="tooltip" title={opts.tooltipText}>
Hover over me for tooltip
</div>
<script>
export default {
opts: {
tooltipText: 'Default Tooltip Text'
}
}
</script>
</tooltip>
এখানে, tooltipText কাস্টম অ্যাট্রিবিউটের মাধ্যমে কম্পোনেন্টে পাস করা হচ্ছে। আপনি এই অ্যাট্রিবিউটের মান পরিবর্তন করে টুলটিপের টেক্সট কাস্টমাইজ করতে পারবেন।
২.৩ Conditionally Adding Attributes
Riot.js আপনাকে ডাইনামিক অ্যাট্রিবিউট যোগ করতে দেয়, যেমন আপনি শর্তসাপেক্ষভাবে কোনো অ্যাট্রিবিউট প্রয়োগ করতে পারেন।
<!-- ConditionalAttributes.riot -->
<conditional-attributes>
<button class="btn" disabled={opts.isDisabled}>Click me</button>
<script>
export default {
opts: {
isDisabled: false
}
}
</script>
</conditional-attributes>
এখানে, isDisabled প্রপসের মাধ্যমে বোতামের disabled অ্যাট্রিবিউট যোগ করা হয়েছে। যদি opts.isDisabled true হয়, তবে বোতামটি অক্ষম (disabled) হবে।
৩. Event Handling and Attributes
Riot.js-এ আপনি ইভেন্ট হ্যান্ডলার এবং Attributes একত্রে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি কাস্টম বাটনে ক্লিক ইভেন্ট হ্যান্ডলারের মাধ্যমে ডেটা পরিবর্তন করা যেতে পারে।
<!-- EventAttributes.riot -->
<event-attributes>
<button onclick={handleClick} id={opts.id} class={opts.class}>Click Me</button>
<script>
export default {
opts: {
id: 'default-btn',
class: 'btn'
},
handleClick() {
alert('Button Clicked!');
}
}
</script>
</event-attributes>
এখানে, বাটনের id এবং class অ্যাট্রিবিউট কাস্টম প্রপস থেকে আসছে এবং handleClick ফাংশনটি ক্লিক ইভেন্ট হ্যান্ডল করবে।
উপসংহার
Riot.js-এ Advanced Props এবং Attributes ব্যবহার করে আপনি আপনার কম্পোনেন্টগুলোকে আরও ডাইনামিক, কাস্টমাইজড এবং রিয়েকটিভ করতে পারবেন। আপনি ডিফল্ট প্রপস, ডাইনামিক প্রপস, টু-ওয়ে ডেটা বাইন্ডিং, কাস্টম অ্যাট্রিবিউট এবং শর্তসাপেক্ষভাবে অ্যাট্রিবিউট যোগ করে কম্পোনেন্টের আচরণ নিয়ন্ত্রণ করতে পারেন।
এই সমস্ত ক্ষমতা Riot.js-কে একটি শক্তিশালী টুল করে তোলে, যা ছোট থেকে বড় অ্যাপ্লিকেশন তৈরির জন্য উপযুক্ত।
Read more
